import React, { Component } from 'react'

export default class App extends Component {
  // 受控表单：表单的 value 收到了状态的控制，视图中 value 的修改又会影响到状态/数据
  // 目的：通过受控的方式收集表单的数据
  state = {
    username: '',
    content: '',
    // #1 定义状态,
    frame: 'react',
  }
  handleInput = (e) => {
    this.setState({ username: e.target.value })
  }
  handleTextArea = (e) => {
    this.setState({ content: e.target.value })
  }
  handleSelect = (e) => {
    // #3 监听 onChange 事件，把选择的内容给 frame 状态
    this.setState({ frame: e.target.value })
  }
  render() {
    return (
      <ul>
        <li>
          <label htmlFor='username'>用户名：</label>
          <input
            id='username'
            type='text'
            value={this.state.username}
            onChange={this.handleInput}
          />
        </li>
        <li>
          <label htmlFor='content'>其他信息：</label>
          <textarea
            id='content'
            value={this.state.content}
            onChange={this.handleTextArea}
          ></textarea>
        </li>
        <li>
          <label htmlFor='frame'>框架：</label>
          {/* #2 把状态和 select 的 value 属性进行绑定 */}
          <select
            id='frame'
            value={this.state.frame}
            onChange={this.handleSelect}
          >
            <option value='vue'>Vue</option>
            <option value='react'>React</option>
            <option value='angular'>Angular</option>
          </select>
        </li>
      </ul>
    )
  }
}
